<style lang="scss" scoped>

.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    margin-bottom: 5px; // 10px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
   .header-left {
      font-size: 15px; // 30px * 0.5
      margin-left: 10px; // 20px * 0.5
    }
   .header-center {
      font-size: 13.5px; // 27px * 0.5
      font-weight: bolder;
      color: #444444;
    }
   .header-right {
      margin-right: 10px; // 20px * 0.5
    }
  }
  main {
    width: 100%;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
   .boxone {
      width: 90%; // 90% * 0.5
      height: 170px; // 340px * 0.5
      border-bottom: 0.5px solid #ccc; // 1px * 0.5
      display: flex;
      flex-direction: column;
     .tizheng-icon {
        width: 100%;
        height: 40px; // 80px * 0.5
        margin-top: 20px; // 40px * 0.5
        background-color: #fff;
        display: flex;
        align-items: center;
        span {
          margin-left: 10px; // 20px * 0.5
        }
      }
     .tizheng-img {
        width: 100%;
        height: 50px; // 100px * 0.5
        margin-top: 10px; // 20px * 0.5
        margin-bottom: 6px; // 12px * 0.5
        display: flex;
        flex-direction: column;
        justify-content: end;
       .custom-button {
          width: 34px; // 68px * 0.5
          height: 15px; // 30px * 0.5
          color: #fff;
          font-size: 10.5px; // 21px * 0.5
          line-height: 15px; // 30px * 0.5
          text-align: center;
          background-color: var(--van-primary-color);
          border-radius: 50px; // 100px * 0.5
        }
      }
     .tizheng-con {
        width: 100%;
        height: 20px; // 40px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <img @click="onClickLeft" src="@/assets/back_black.png" alt="" />
      </div>
      <div class="header-center">
        <p>我的体征</p>
      </div>
      <div class="header-right">
        <van-button
          @click="onBtn"
          style="width: 100px; height: 50px; border-radius: 12px"
          size="small"
          type="primary"
          >完成</van-button
        >
      </div>
    </header>
    <main>
      <div class="boxone">
        <div class="tizheng-icon">
          <img src="@/assets/icon_height1.png" alt="" />
          <span>身高</span>
        </div>
        <div class="tizheng-img">
          <van-slider v-model="value" bar-height="10px" min="50" max="250">
            <template #button>
              <div class="custom-button">{{ value }}</div>
            </template>
          </van-slider>
        </div>
        <div class="tizheng-con">
          <p>50cm</p>
          <p>250cm</p>
        </div>
      </div>
      <div class="boxone">
        <div class="tizheng-icon">
          <img src="@/assets/icon_weight2.png" alt="" />
          <span>体重</span>
        </div>
        <div class="tizheng-img">
          <van-slider v-model="value1" bar-height="10px" min="30" max="150">
            <template #button>
              <div class="custom-button">{{ value1 }}</div>
            </template>
          </van-slider>
        </div>
        <div class="tizheng-con">
          <p>30kg</p>
          <p>150kg</p>
        </div>
      </div>
      <div class="boxone">
        <div class="tizheng-icon">
          <img src="@/assets/icon_age3.png" alt="" />
          <span>年龄</span>
        </div>
        <div class="tizheng-img">
          <van-slider v-model="value2" bar-height="10px" min="18" max="120">
            <template #button>
              <div class="custom-button">{{ value2 }}</div>
            </template>
          </van-slider>
          <!-- <van-progress pivot-text="" :percentage="40"/> -->
        </div>
        <div class="tizheng-con">
          <p>18</p>
          <p>120</p>
        </div>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { ref, watch } from 'vue'
// 身高
const value = ref(0)
// 体重
const value1 = ref(0)
// 年龄
const value2 = ref(0)
// 监听身高滑块变化
const watchValue = () => {
  watch(value, (newValue) => {
    localStorage.setItem("height", newValue.toString());
  })
}
watchValue();
// 监听体重滑块变化
const watchValue1 = () => {
  watch(value1, (newValue) => {
    localStorage.setItem("weight", newValue.toString());
  })
}
watchValue1();
// 监听年龄滑块变化
const watchValue2 = () => {
  watch(value2, (newValue) => {
    localStorage.setItem("age", newValue.toString());
  })
}
watchValue2();

const onBtn = () => {
  router.push({path: '/userchild'})
}
const onClickLeft = () => history.back()
</script>
